Introducing accessibility in typography 字型排版無障礙設計

讓文字具有無障礙性應成為日常工作的一部分。然而,僅僅最佳化易辨識度和可讀性的常規排版做法還不足以使文字完全無障礙。

首先,讓我們明確易辨識度和可讀性的概念。這兩者都是衡量清晰度的標準。易辨識度是指讀者能夠區分單個字元和單詞的程度;可讀性則是指整體文字的易讀程度。

上排:對比易辨識度較低的Gill Sans和Prosto One字型(左)與易辨識度較高的Raleway和Noto Sans字型。下排:對比可讀性較低(左)與可讀性較高(右)的文字。兩段都使用Roboto字型,行高相同,但字號不同。

Choosing accessible type 選擇無障礙字型

選好字型是無障礙排版的第一步。找那些好看又容易辨認的字型。沒有一種字型適合所有人,但某些特點可以讓字型更適合特定人群。

這個原則適用於所有文字系統:讓形狀相似的字元更容易區分,特別是字母、數字和標點符號等。

設計師創造的LexendAtkinson Hyperlegible字型專為提高易讀性而設計。Poppins等字型也受到視覺或認知障礙人士的歡迎。

Checking legibility 檢查易辨識度

字型內空(如"o"、"e"、"c"等字母內部的空白區域)影響易辨識度。當字型內空開放時,字母內的空白區域更大,使字母看起來更大,也讓讀者更容易區分形狀相似的字母,如"c"和"e"。

左側(紅線標註):小寫字母"c"、"o"和"e"的封閉型字型內空。右側(藍線標註):小寫字母"c"、"o"和"e"的開放型字型內空

Checking readability 檢查可讀性

映象效應指讀者因字元翻轉或旋轉後與其他字元相似而難以辨認。例如,讀者可能把小寫"b"誤認為"d",或把"6"誤認為"9",將"bog"讀成"dog"。

閱讀障礙患者面臨更普遍的問題是字母位置錯亂,如將"loin"看成"lion"或將"lien"看成"line"。為減少映象效應和位置錯亂,確保以下字元對有足夠的區別:

選擇無襯線體時,評估大寫"L"、小寫"l"和數字"1"之間的區別很重要,因為它們結構相似(都是單一垂直線)。新增襯線、尾部,或調整高度和線條粗細等微小變化可提高易辨識度。

許多字形只是簡單映象,沒有其他區別。小寫"b"、"d"、"p"和"q"是最容易混淆的字母。對這些字母做細微修改(如改變筆畫對比度或內空寬度)可幫助區分,結構性變化效果更好。

左側:Helvetica(上)和Public Sans(下)使用映象字形。右側:Andika(上)和Atkinson Hyperlegible(下)使用非映象字形,幫助讀者避免混淆相似字元。

比較Roboto、Abyssinica SIL、Intern Tights、Open Sans、Noto Sans Mono和Noto Sans Japanese中的"b"、"d"、"q"、"p"、"a"、"8"、"6"、"g"、"a"、"6"、"1"、"I"和"l"。

尋找能清晰區分的字母。對於中度至重度視障人士,"o"、"c"、"e"或"a"等字元容易混淆,使單詞難以識別。

從左到右:字型Andika、Lexend和Atkinson Hyperlegible展示了它們在區分容易混淆的字元組合方面的有效性。

Accessible typography beyond typefaces 字型之外的無障礙排版

選擇好字型後,考慮整體排版的無障礙設計。首先關注內容結構。網頁設計中,使用正確的HTML標籤,如合適的標題層級(h1、h2等)

Color 顏色

顏色對比度對使用者區分文字和非文字元素很重要。對比度高,影象更易辨認。對比度低,使用者在強光或弱光條件下難以分辨內容。

對比率表示兩種顏色的差異,通常寫為1:1或21:1。顏色與背景的對比率根據亮度(發光強度)從1到21不等。比率差異越大,顏色亮度差異越大。作為最低標準,W3C網頁內容無障礙指南(WCAG)為AA級別推薦以下對比率:

顏色對比問題複雜,因為認知障礙者可能對光敏感,高對比度(如21:1黑白對比)可能導致眼疲勞或分散注意力。較好的折中方案是7:1對比率,即WCAG的AAA級別。

以下文字符合顏色對比率建議,在背景色上清晰可辨。

白底黑字和黑底白字都符合顏色對比標準。

選擇背景、文字和其他元件顏色時,除對比度外也要考慮讀者對顏色的感知。

色盲(色覺缺陷)有多種型別。據英國色盲意識組織估計,全球約有3億色盲患者。約8%男性和0.5%女性有紅綠色盲,使他們難以識別紅、綠和黃色調。紅綠色盲最常見,隨年齡增長,識別和區分顏色的能力也會下降,即使非先天色盲者也會受影響。隨著眼睛老化,藍色和黃色變得越來越難辨認。

更多顏色和對比度資訊,參閱Material Design無障礙顏色對比指南、Material Design顏色與無障礙、顏色感知色盲意識。體驗不同型別色盲效果,嘗試色覺模擬器應用

對比度測試工具:https://webaim.org/resources/contrastchecker/

注意,這裡討論的對比度與字型設計中的對比度不同,後者指字形中最粗和最細部分的差異。

Text size and spacing 文字大小和間距

確保文字不要太小。字型大小的確切尺寸因使用的單位、視口大小(相對單位)和裝置螢幕畫素密度而異,但正文最小尺寸使用16px、1em或1rem是安全的選擇。

使用適當的行高(不要太大導致行間脫節),不要讓行長過寬。移動裝置和瀏覽器允許使用者調整全域性字型大小。在安卓應用中,使用可縮放畫素(sp)標記文字。iOS中,Dynamic Type功能允許調整字型大小。編碼動態文字時不要固定行高,否則使用者選擇大字號時內容行可能重疊。

對比可讀性較低(左)與可讀性較高(右)的文字。兩段都使用Roboto字型,行高相同,但字號不同。

確保為大號字型和其他書寫系統預留足夠空間。

確保字元間有足夠間距。字型寬度各異,過於緊密排列會使字母重疊或混淆。字元擁擠會導致閱讀困難,單詞模糊或消失。增加字母、單詞和行間距可減輕這些問題。

在Google Fonts選擇字型時,使用Type Tester嘗試不同寬度,選擇視覺舒適、減少眼疲勞並提高閱讀體驗的設定。視覺敏銳度和文字大小瞭解視障人士對不同文字大小的需求。

Type Tester顯示具有粗細、寬度、傾斜和升部高度可變軸的文字。